<template>
  <div class="cover_container">
    <!-- 图片 -->
    <div v-if="['image', 'mpnews'].includes(form.article_type)" class="img_box">
      <div class="img_content" :style="{ background: `url(${form.cover})` }">
        <div class="img_content_text">
          {{ form.article_title }}
        </div>
        <div class="img_btn">
          <PhoneBtn />
        </div>
      </div>
    </div>
    <!-- 视频 -->
    <div v-if="form.article_type == 'video'" class="video_box">
      <div class="video_content" :style="{ background: `url(${form.cover})` }">
        <div class="video_content_text">
          {{ form.article_title }}
        </div>
        <div class="card_video_player_wrp">
          <div class="card_video_player"></div>
          <div class="card_video_length">0.003</div>
        </div>
        <div class="video_btn">
          <PhoneBtn />
        </div>
      </div>
    </div>
    <!-- 音频 -->
    <div v-if="form.article_type == 'voice'" class="audio_box">
      <div class="card_audio_player_wrp">
        <div class="card_audio_hd">
          {{ form.article_title }}
        </div>
        <div class="card_audio_player"></div>
        <div class="audio_btn">
          <PhoneBtn />
        </div>
      </div>
    </div>
    <!-- 文字 -->
    <div v-if="form.article_type == 'text'" class="audio_box">
      <div class="card_audio_player_wrp">
        <div class="card_audio_hd">
          {{ form.article_title }}
        </div>
        <div class="audio_btn">
          <PhoneBtn />
        </div>
      </div>
    </div>
    <div class="text_desc">
      文字消息暂不支持加入多图文
    </div>
  </div>
</template>

<script setup lang="ts">
import PhoneBtn from './PhoneBtn.vue';
import { reactive, ref } from 'vue'
import bus from '@/utils/bus';
const state = reactive({
  img: '',
})
const form = ref({
  article_title: '',
  article_type: 'mpnews',
  cover: ''
})
bus.on('form', (data: any) => {
  console.log();
  form.value = data
})
</script>

<style scoped lang="scss">
.cover_container {
  font-size: 14px;

  .img_box {
    width: 100%;
    height: 176px;
    background: #F5F5F5;
    background-color: pink;
    border: 2px solid #ed742e;
    box-sizing: border-box;

    .img_content {
      width: 100%;
      height: 100%;
      position: relative;
      background-size: cover !important;
      background-repeat: no-repeat !important;

      .img_content_text {
        position: absolute;
        right: 15px;
        bottom: 15px;
        left: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;

        color: #FFFFFF;
        font-weight: 400;
        z-index: 1;
        line-height: 22px;
      }

      .img_btn {
        position: absolute;
        right: -214px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  .video_box {
    width: 100%;
    height: 176px;
    background: #F5F5F5;
    background-color: pink;
    border: 2px solid #ed742e;
    box-sizing: border-box;

    .video_content {
      width: 100%;
      height: 100%;
      position: relative;
      background-size: cover;

      .video_content_text {
        position: absolute;
        right: 15px;
        bottom: 15px;
        left: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        word-break: break-all;

        color: #FFFFFF;
        font-weight: 400;
        z-index: 1;
        line-height: 22px;
      }

      .card_video_player_wrp {
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: center;
        align-items: center;

        .card_video_player {
          display: -ms-flexbox;
          display: flex;
          -ms-flex-align: center;
          align-items: center;
          -ms-flex-pack: center;
          justify-content: center;
          width: 48px;
          height: 48px;
          background: rgba(237, 237, 237, 0.9);
          border-radius: 50%;

          &::before {
            content: "";
            display: inline-block;
            width: 28px;
            height: 28px;
            vertical-align: middle;
            background-size: cover;
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E %3Cpath fill=%27%23000000%27 opacity=%27.9%27 fill-rule=%27evenodd%27 d=%27M9.524 4.938l10.092 6.21a1 1 0 0 1 0 1.704l-10.092 6.21A1 1 0 0 1 8 18.21V5.79a1 1 0 0 1 1.524-.852z%27/%3E%3C/svg%3E');
          }
        }

        .card_video_length {
          color: #FFFFFF;
          font-size: 12px;
          font-style: normal;
          padding-top: 4px;
        }

      }

      .video_btn {
        position: absolute;
        right: -214px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  .audio_box {
    display: flex;
    width: 100%;
    padding: 36px 15px;
    background: #F5F5F5;
    background-color: pink;
    border: 2px solid #ed742e;
    box-sizing: border-box;

    .card_audio_player_wrp {
      width: 100%;
      height: 100%;
      position: relative;
      background-size: cover;
      display: flex;

      .card_audio_hd {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        word-break: break-all;
        color: #FFFFFF;
        font-weight: 400;
        z-index: 1;
        line-height: 22px;
      }

      .card_audio_player {
        width: 42px;
        height: 42px;
        background: transparent url('') no-repeat 50% 50%;
        background-size: cover;
      }

      .audio_btn {
        position: absolute;
        right: -230px;
        top: 50%;
        transform: translateY(-50%);
      }
    }

  }

  .text_desc {
    padding: 10px 20px;
    color: #9a9a9a;
    text-align: right;
  }
}
</style>